<template>
  <div class="table_chart">
    <table width="100%">
      <tr>
        <th>日期</th>
        <th>支出</th>
        <th>收入</th>
        <th>结余</th>
      </tr>
      <tr v-for="(item, index) in data" :key="'table' + index">
        <td>{{ item.date }}</td>
        <td class="pay">{{ item.pay.toFixed(2) }}</td>
        <td class="income">{{ item.income.toFixed(2) }}</td>
        <td>{{ (item.income - item.pay).toFixed(2) }}</td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    data: {
      type: Array,
      required: true
    }
  }
})
</script>

<style scoped>
  .table_chart {
    height: 100%;
    width: 100%;
  }
  tr {
    height: 36px;
  }
  .income {
    color: #5DBB41;
  }
  .pay {
    color: #EB7775;
  }
</style>